import { useState, useMemo } from 'react'
import { Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { useDebounce } from 'ahooks'
import FieldItem from './FieldItem'
import styles from './index.module.less'

const FieldList = ({ dmField: { title, fields } }) => {
  const [value, setValue] = useState(null)
  const keyword = useDebounce(value, { wait: 500 })

  const filterFields = useMemo(
    () =>
      keyword
        ? fields.filter((v) => v.title.toLowerCase().includes(keyword.toLowerCase()))
        : fields,
    [fields, keyword]
  )

  return (
    <div className={styles['field-list']}>
      <div className={styles['head']}>
        <label>{title}</label>
        <Input
          size="small"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          bordered={false}
          prefix={<SearchOutlined className="icon-color-base" />}
          placeholder="请输入关键字"
        />
      </div>
      <div className={styles['list']}>
        {filterFields.map((field) => (
          <FieldItem key={field.id} field={field} />
        ))}
      </div>
    </div>
  )
}

export default FieldList
